<extend name="Base/common"/>
<block name="style">

   <style type="text/css">
    body{
        background:#EBEBEB;
    }
   .top{
        width: 100%;
        height: 15%;
        

   }

 
    p{
        width: 90%;
        height: 60px;
        margin-left: 5%;
        margin-top:10px; 
        text-align: center;
        height: 60px;
        font-size: 18px;
        letter-spacing:2px;

    }

    .center{ 
        width: 90%;
        height:50%;
        margin-left: 5%;
    }

    .money{
        width: 95%;
        height: 40px;
        background: #fff;
        float: left;
        border:none;
        margin-top: 4%;
        font-size: 24px;
        color:#3e3a39;
    }
    span{
        display: block;
        width: 90%;
        margin: auto;
    }

    label{
        float: left;
        width: 95%;
        height: 20px;
        font-size: 15px;
        padding: 15px 0px;
    }
    .clear{
        clear: both;
    }

    .pay_type {
        margin-top:5%;
        height:130px;
    }
    .pay_type input{
        float: left;
        height: 20px;
    }
    .pcreate li {
        float: left;
        width: 25%;
    }

    .pay_type li {
        background:#fff; 
        width: 100%;
        border-radius: 5px 5px;
        border:1px solid #EBEBEA;
        text-indent: 1em;
        height: 30px;
        line-height: 30px;
    }
    .pay_type .check {
        background:#fff; 
        width: 100%;
        border-radius: 5px 5px;
        border:1px solid #EBEBEA;
        text-indent: 1em;
        height: 30px;
        line-height: 30px;

    }





</style>
</block>
<block name="body">
    <div style="position:relative;">
  
            <form action="" method="post" style="height:40%;margin-top:6%">
                <input type="hidden" id="uid" name="shop_name" value="{$one.shop_name}"/>
                <!-- <span>支付金额</span> -->
                <div class="center" style="background:#fff;border-radius:5px 5px;padding: 0px 15px;">

                    <i style="float:left;width:100%;height:100%;border-bottom:1px solid #dcdddd;">
                        <b style="float:left;width:5%;height:100%;font-family:Arial;font-size:24px;padding-bottom:0;margin-top:5%">&yen;</b>
                        <input class="money" type="text" name="money" readonly="readonly"  id="money" />
                        
                    </i>
                    <input type="hidden" id="uid" name="uid" value="{$one.uid}"/>

                    <input type="text"  maxlength="30" name="subject"  placeholder="添加备注(限30字内)" style="height:20px;font-size:12px;border:none"/>
                    
                </div>

                <span class="span" style="height:30px;color:red;display:none;font-size:14px;line-height:30px;margin-top:1%;margin-bottom:-5%;"> khadsflshf</span>
                <div class="center pay_type " style="">
                    <div class="check"><span style="float:left;width:40%;background:none">付款方式</span>    <font style="float:right;width:auto;background:none;margin-right:1em;text-align:center">请选择</font> <div class="clear"></div></div>
                    <input id="pay_type" type="hidden" name='pay_type' value="">

                    <php>
                        $type=D('Tongdao')->where(['id'=>1])->find();
                    </php>
                    <ul  style="display:none">

                    <if condition="$type[hk_xy] eq 1">
                        <li  value="1">
                            信用卡支付
                        </li>
                        <else/>
                    </if>
                    <if condition="$type[hk_hb] eq 1">
                        <li  value="2">
                            花呗支付
                        </li>
                    <else/>
                    </if>
                    <if condition="$type[hk_fq] eq 1">
                        <li  value="3">
                           花呗分期支付
                        </li>

                        <else/>
                    </if>
                    </ul>
                </div>
                <div class="center pcreate" style="margin-top:5px;display:none">
                    <ul>
                        <li>
                            <label sytle="width:30%" value="3期">&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="pcreate" value="3" checked> 3期</label>

                        </li>
                        <li>
                            <label sytle="width:30%" value="6期">&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="pcreate" value="6"> 6期</label>
                        </li>
                        <li>
                            
                            <label sytle="width:30%" value="12期">&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="pcreate" value="12">12期</label>
                        </li>
                    </ul>
                    
                    
                    
                </div>
            </form>

<!--             <div class="top" style="margin-top:5%">
                <p style="margin-top:0;text-align:left;">
                    温馨提示：付款前请仔细核实收款方信息，避免上当受骗。(商家有问题？点<a href="http://weixin.jcsmkj.cn/index.php?m=Weixin&c=User&a=tousu&complainant={$one.shop_name}" style="color:red">这里</a>投诉)
                </p>
            </div>


         -->
    </div>


     <div class="block" style="height:100%;width:100%;position:fixed;top:0;left:0;z-index:9;display:none;background:rgba(0,0,0,0.3);">
        
            <div class="box" style="margin:auto;margin-top:25%;;width:75%;height:auto;background:#fff;box-shadow: 2px 2px 2px #666;border-radius:7px 7px 0px 0px">
            

                <div class="cancle" style="height:50px;border-bottom:#ccc 1px solid;line-height:50px;background:#fff;border-top-left-radius:7px;border-top-right-radius:7px;color:red;text-align:center">
                    温馨提示
                </div>

               
                <div class="pay" style="height:auto;border-bottom:1px solid #ccc;padding:5px 15px;font-size:16px;">
                    如遇到要求扫二维码/兼职刷单/财务要求/银行卡支付宝认证/客服赔款退款等之类的骗局请立即<b style="color:red;">终止交易</b>，如选择<b style="color:red">继续交易</b>视您已阅读以上内容，产生一切后果由您本人自行承担
                </div>
                <label class="sure" style="height:50px;width:100%;border-radius:0px 0px 7px 7px;padding:0px;">
                    <span class="type1"  style="float:left;height:50px;width:50%;color:red;line-height:50px;font-size:18px;background:#fff;text-align:center;border-radius:0px 0px 0px 7px;border-right:1px solid #ccc">立即终止</span>
                    <span class="type2"  style="float:right;height:50px;width:50%;color:#009fe8;line-height:50px;font-size:18px;background:#fff;text-align:center;border-radius:0px 0px 7px 0px">10s</span>
                    
                </label>
        </div>


    </div>
<button type="button" id='login-btn' style="width:22%;height:181px;background:#F9626A;color:#fff;border-radius:0 0;border:1px solid #eee;font-size:18px;position: absolute;right: 0;bottom: 0;z-index:2">付款</button>
</block>
<block name="script">
        <script type="text/javascript">
        ;(function(exports){
          var KeyBoard = function(input, options){
            var body = document.getElementsByTagName('body')[0];
            var DIV_ID = options && options.divId || '__w_l_h_v_c_z_e_r_o_divid';
             
            if(document.getElementById(DIV_ID)){
              body.removeChild(document.getElementById(DIV_ID));
            }
             
            this.input = input;
            this.el = document.createElement('div');
             
            var self = this;
            var zIndex = options && options.zIndex || 1;
            var width = options && options.width || '100%';
            var height = options && options.height || '213px';
            var fontSize = options && options.fontSize || '15px';
            var backgroundColor = options && options.backgroundColor || '#fff';
            var TABLE_ID = options && options.table_id || 'table_0909099';
            var mobile = typeof orientation !== 'undefined';
             
            this.el.id = DIV_ID;
            this.el.style.position = 'absolute';
            this.el.style.left = 0;
            this.el.style.right = 0;
            this.el.style.bottom = 0;
            this.el.style.zIndex = zIndex;
            this.el.style.width = width;
            this.el.style.height = height;
            this.el.style.backgroundColor = backgroundColor;
             
            //样式
            var cssStr = '<style type="text/css">';
            cssStr += '#' + TABLE_ID + '{text-align:center;width:100%;height:180px;border-top:1px solid #eee;background-color:#FFF;}';
            cssStr += '#' + TABLE_ID + ' td{width:26%;border:1px solid #eee;border-right:0;border-top:0;}';
            if(mobile){
              cssStr += '#' + TABLE_ID + ' td:active{background-color:#1FB9FF;color:#FFF;}';
            }
            cssStr += '</style>';

             
            //Button
            var btnStr = '<span style="color:#009fe8;height:33px;width:100%;line-height:33px;border-bottom:none;text-align:center">绿叶收银台·资金安全保驾护航</span> ';
            // btnStr += '<div id="ok" style="width:65px;height:33px;margin-top:-33px;float:right;text-align:center;color:#1FB9FF;line-height:33px;border-radius:3px;cursor:pointer;">完成</div>';
            // btnStr += '';
             
            //table
            var tableStr = '<table id="' + TABLE_ID + '" border="0" cellspacing="0" cellpadding="0">';
              tableStr += '<tr><td>1</td><td>2</td><td>3</td><td rowspan="4" ></td></tr>';
              tableStr += '<tr><td>4</td><td>5</td><td>6</td></tr>';
              tableStr += '<tr><td>7</td><td>8</td><td>9</td></tr>';
              tableStr += '<tr><td >.</td><td>0</td>';
              tableStr += '<td >删除</td></tr>';
              tableStr += '</table>';
            this.el.innerHTML = cssStr + btnStr + tableStr;
             
            function addEvent(e){
              var ev = e || window.event;
              var clickEl = ev.element || ev.target;
              var value = clickEl.textContent || clickEl.innerText;
              if(clickEl.tagName.toLocaleLowerCase() === 'td' && value !== "删除"){
                    if(value==='.'){
                        if(self.input.value.indexOf('.')>-1){
                                //已经有一个.
                        }else{
                            if(self.input.value.length==0){  
                                self.input.value = '0.';//长度为0时输入.
                            }else{
                                if(self.input.value.indexOf('.')>-1&&self.input.value.indexOf('.')==(self.input.value.length-3)){

                                }else{
                                    self.input.value += value;
                                }
                            }
                            
                        }
                    }else{
                         if(self.input.value.length==0&&value==='0'){  
                                self.input.value = '0.';//长度为0时输入.
                            }else{
                                if(self.input.value.indexOf('.')>-1&&self.input.value.indexOf('.')==(self.input.value.length-3)){

                                }else{
                                    self.input.value += value;
                                }
                            }
                      
                    }
              }else if(clickEl.tagName.toLocaleLowerCase() === 'div' && value === "完成"){
                        

              }else if(clickEl.tagName.toLocaleLowerCase() === 'td' && value === "删除"){
                var num = self.input.value;
                if(num){
                  var newNum = num.substr(0, num.length - 1);
                  self.input.value = newNum;
                }
              }
            }
             
            if(mobile){
              this.el.ontouchstart = addEvent;
            }else{
              this.el.onclick = addEvent;
            }
            body.appendChild(this.el);
          }
           
          exports.KeyBoard = KeyBoard;
         
        })(window);

    </script>
<script type="text/javascript">


        var url=''
        var pay_data;

        $('.check').click(function(){
            $('.pay_type').find("ul").show("1000");
        })





        $('.pay_type').find("li").click(function(){
            var money=$('#money').val();
            $('.pay_type').find("input").val($(this).val())
            var type=$(this).val()
            var text=$(this).text()
            if(money==0||money==''){
                $('.span').text('请输入金额')
                $('.span').show()
                }else{
                    if(type==3){ //分期付----默认选择分期数3
                        $('.pcreate').show('1000')
                    }else{
                        $('.pcreate').hide('1000')
                    }

                    if(type==1){
                        // 手机网站支付的话什么都不做，因为直接提交数据到后台即可
                        if(100>money){
                            // 100-50000 信用卡
                            $('.span').text('当前选择付款方式金额不可低于100元')
                            $('.span').show()
                        }else if(money>50000){
                            $('.span').text('当前选择付款方式金额不可超过50000元')
                            $('.span').show()
                        }else{
                            $('.pay_type').find("font").text(text)
                            $('.pay_type').find("ul").hide("1000");
                            $('.pcreate').hide('1000')
                            $('.span').hide()
                        }
                        
                    }else{
                        // 分期付+花呗需要得到付款二维码路径
                        var data=$('form').serializeArray()
                        $.ajax({
                            type:'post',
                            data:data,
                            url:"{:U('create_url')}",
                            dataType:'json',
                            success:function(m){
                                console.log(m)
                                // alert(m)
                                if(m.info){
                                    $('.span').text(m.info)
                                    $('.span').show()
                                }else{
                                    url=m.erwm
                                    pay_data=m
                                    $('.span').hide()
                                    if(type==3){
                                        var p=$('.pcreate').find("input:checked").val()
                                        $('.pay_type').find("font").text(text+'('+p+'期)')
                                        
                                    }else{
                                        $('.pay_type').find("font").text(text)
                                        $('.pay_type').find("ul").hide("1000");
                                    }
                                    

                                }
                            }
                        })
                    }
                    
                }
        })


        $('.pcreate').find("input[type='radio']").click(function(){
            var money=$('#money').val();
            var text=$(this).val()
            if(money==0||money==''){
                $('.span').text('请输入金额')
                $('.span').show()
            }else{
                
                var data=$('form').serializeArray()

                $.ajax({
                    type:'post',
                    data:data,
                    url:"{:U('create_url')}",
                    dataType:'json',
                    success:function(m){
                        // console.log(m)
                        // alert(m) //返回一个路径
                        if(m.info){
                            // confirm(m.info)
                            $('.span').text(m.info)
                            $('.span').show()
                        }else{
                            url=m.erwm
                            pay_data=m
                            
                            $('.pay_type').find("font").text('花呗分期支付('+text+'期)')
                            $('.pay_type').find("ul").hide("1000");
                            $('.pcreate').hide('1000')
                            $('.span').hide()



                        }
                        
                    }
                })
            }
            
        })


</script>

<script >

  
    var time=9;
    var i;
    $('#login-btn').click(function(){
        var money=$('#money').val();
        var type=$('#pay_type').val();
        // alert(type)
        if(money==0||money==''){
            $('.span').text('请输入金额')
            $('.span').show()
        }else if(type==''){
            $('.span').text('请选择付款方式')
            $('.span').show()
        }else{
                        
                        if(type==1){
                                    if(100>money){
                                        // 100-50000 信用卡
                                        $('.span').text('当前选择付款方式金额不可低于100元')
                                        $('.span').show()
                                    }else if(money>50000){
                                        $('.span').text('当前选择付款方式金额不可超过50000元')
                                        $('.span').show()
                                    }else{
                                                        $('.block').show()
                                                        $('#__w_l_h_v_c_z_e_r_o_divid').hide()
                                                        $('#login-btn').hide()
                                                        i=setInterval(function(){
                                                            if(time>0){
                                                                $('.type2').html(time+'s')
                                                                time--;
                                                            }else{
                                                                clearInterval(i)
                                                                
                                                                if(type==1){
                                                                    // 信用卡
                                                                    $('.type2').html('<button  style="background:#fff;color:#009fe8;width:100%;height:100%;border:none">继续交易</button>')
                                                                }
                                                            }
                                                            
                                                        },1000)


                                    }
                        }else{
                               // 100-15000 花呗+分期
                            if(type==2){
                                if(10>money){
                                    $('.span').text('当前选择付款方式金额不可低于10元')
                                    $('.span').show()
                                }else if(money>500){
                                    $('.span').text('当前选择付款方式金额不可超过500元')
                                    $('.span').show()
                                }else{
                                    // 满足条件则获取付款二维码路径
                                        var data=$('form').serializeArray()
                                        $.ajax({
                                            type:'post',
                                            data:data,
                                            url:"{:U('create_url')}",
                                            dataType:'json',
                                            success:function(m){
                                                // console.log(m)
                                                // alert(m) //返回一个路径
                                                if(m.info){
                                                    $('.span').text(m.info)
                                                    $('.span').show()
                                                }else{
                                                    url=m.erwm
                                                    pay_data=m
                                                    $('.block').show()
                                                    $('#__w_l_h_v_c_z_e_r_o_divid').hide()
                                                        $('#login-btn').hide()
                                                    
                                                    i=setInterval(function(){
                                                        if(time>0){
                                                            $('.type2').html(time+'s')
                                                            time--
                                                        }else{
                                                            clearInterval(i)
                                                            
                                                                $.ajax({
                                                                    type:'post',
                                                                    data:pay_data,
                                                                    url:"{:U('save_data')}",
                                                                    dataType:'json',
                                                                    success:function(m){
                                                                        // alert(m)
                                                                        if(m.info){
                                                                            // confirm(m.info)
                                                                            $('.span').text(m.info)
                                                                            $('.span').show()
                                                                            $('.block').hide()
                                                                            $('#__w_l_h_v_c_z_e_r_o_divid').show()
                                                                            $('#login-btn').show()
                                                                            time=9
                                                                            clearInterval(i)
                                                                            $('.type2').html('10s')
                                                                        }else{
                                                                            if(m.re>0){
                                                                                $('.type2').html('<a href="'+url+'"  style="display:block;background:#fff;color:#009fe8;width:100%;height:100%;border:none">继续交易</a>')
                                                                            }else{
                                                                                $('.block').hide()
                                                                                $('#__w_l_h_v_c_z_e_r_o_divid').show()
                                                                                $('#login-btn').show()
                                                                                time=9
                                                                                clearInterval(i)
                                                                                $('.type2').html('10s')
                                                                            }
                                                                        }
                                                                        
                                                                    }
                                                                })
                                                            
                                                        }
                                                        
                                                    },1000)


                                                }
                                            }
                                        })

                                    }
                            }else{
                                if(100>money){
                                    alert('当前选择付款方式金额不可低于100元')
                                }else if(money>15000){
                                    alert('当前选择付款方式金额不可超过15000元')
                                }else{

                                    // 满足条件则获取付款二维码路径
                                    var data=$('form').serializeArray()
                                    $.ajax({
                                        type:'post',
                                        data:data,
                                        url:"{:U('create_url')}",
                                        dataType:'json',
                                        success:function(m){
                                            // console.log(m)
                                            // alert(m) //返回一个路径
                                            if(m.info){
                                                // confirm(m.info)
                                                $('.span').text(m.info)
                                                $('.span').show()
                                            }else{
                                                url=m.erwm
                                                pay_data=m
                                                     $('.block').show()
                                                     $('#__w_l_h_v_c_z_e_r_o_divid').hide()
                                                    $('#login-btn').hide()
                                                     
                                                    i=setInterval(function(){
                                                        if(time>0){
                                                            $('.type2').html(time+'s')
                                                            time--
                                                        }else{
                                                            clearInterval(i)
                                                            
                                                                $.ajax({
                                                                    type:'post',
                                                                    data:pay_data,
                                                                    url:"{:U('save_data')}",
                                                                    dataType:'json',
                                                                    success:function(m){
                                                                        // alert(m)
                                                                        if(m.info){
                                                                            // confirm(m.info)
                                                                            $('.span').text(m.info)
                                                                            $('.span').show()
                                                                            $('.block').hide()
                                                                            $('#__w_l_h_v_c_z_e_r_o_divid').show()
                                                                            $('#login-btn').show()
                                                                            time=9
                                                                            clearInterval(i)
                                                                            $('.type2').html('10s')
                                                                        }else{
                                                                            if(m.re>0){
                                                                                $('.type2').html('<a href="'+url+'"  style="display:block;background:#fff;color:#009fe8;width:100%;height:100%;border:none">继续交易</a>')
                                                                            }else{
                                                                                $('.block').hide()
                                                                                $('#__w_l_h_v_c_z_e_r_o_divid').show()
                                                                                $('#login-btn').show()
                                                                                time=9
                                                                                clearInterval(i)
                                                                                $('.type2').html('10s')
                                                                            }
                                                                        }
                                                                        
                                                                    }
                                                                })
                                                            
                                                        }
                                                        
                                                    },1000)

                                            }
                                        }
                                    })
                                }
                            }
                        } 



            
        }
    })

    $('.type1').click(function(){
        $('.block').hide()
        $('#__w_l_h_v_c_z_e_r_o_divid').show()
        $('#login-btn').show()
        time=9
        clearInterval(i)
        $('.type2').html('10s')
    })

    $('.type2').on('click','button',function(){
        $('form').submit()

    })


    </script>




    <script type="text/javascript">
    // (function(){
      var input1 = document.getElementById('money');
      
      // input1.onclick = function(){
        
        new KeyBoard(input1);
    //   };
    // })();
    </script>

</block>